<%@page import="share.Constant"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Customer Password Change</title>
	
		<link rel="stylesheet" href="<c:url value="css/bootstrap.min.css" />"
			type="text/css" />
		<link rel="stylesheet"
			href="<c:url value="css/animate.css" />" type="text/css" />
		<link rel="stylesheet"
			href="<c:url value="font-awesome-4.2.0/css/font-awesome.min.css" />"
			type="text/css" />
		<link rel="stylesheet" href="<c:url value="css/jquery-ui-min.css" />"
			type="text/css" />
		<link rel="stylesheet"
			href="<c:url value="css/style.css" />" type="text/css" />
		
		<!-- SCRIPT -->
		<script src="<c:url value="js/jquery/jquery.min.js" />"
			type="text/javascript"></script>
		<script src="<c:url value="js/jquery/jquery-ui.js" />"
			type="text/javascript"></script>
		<script>
			$(document).ready(function(){
				$("#changePassForm").submit(function(e){
					e.preventDefault();
					var res = true;
					var password = $("#newPassword").val();
					var repeatPass = $("#repeatNewPassword").val();
	
					if (password.length < 8 || password.length > 25) {
						$("#newPassword").addClass("error");
						res = false;
					} else {
						$("#newPassword").removeClass("error");
						res &= true;
					}
					
					if (password != repeatPass) {
						$("#repeatNewPassword").addClass("error");
						res = false;
					} else {
						$("#repeatNewPassword").removeClass("error");
						res &= true;
					}
					
					if (res) {
						$.ajax({ 
					        type: 'post', 
					        url: 'doChangePassword', 
					        data: $("#changePassForm").serialize(),
					        datatype: 'json',
					        success: function (data) { 
								console.log(data);
								if (data.success == true) {
									alert("Password changed successfully, you will be redirected to login page after clicked 'OK' button ");
									window.location = "logout";
								} else {
									$("#oldPassword").addClass("error");
								}
					        	//$("#message").html(data.message);
					        }
					    });
					} else {
						return false;
					}
				});
			});
		</script>
	</head>
	<body class="container-fluid">
		<header class="row">
			<div id="logocontainer" class="col-md-2">
				<img src="images/logo.png"/>		
			</div>
			<div class="col-md-10 status-container">
				<h1 class="welcomeMessage">Welcome user</h1>
			</div>
			<div class="bg-trees"></div>
		</header>
		<section id="maintab" class="row">
			<div id="tabheader" class="col-md-2">
				<div class="tabheaderitem"><a href="customerInfo"><span class="fa fa-info"></span> Account Info</a></div>
				<div class="tabheaderitem active"><a href="changePassword"><span class="fa fa-cogs"></span> Change password</a></div>
				<div class="tabheaderitem"><a href="moneyTransfer"><span class="fa fa-random"></span> Money transfering</a></div>
				<div class="tabheaderitem"><a href="history"><span class="fa fa-history"></span> Transaction history</a></div>
				
				<div class="customerInfo">
					<span class="fa fa-user"></span> ${customer.firstName} ${customer.lastName}<br>
					<span class="fa fa-money"></span> <fmt:formatNumber type="number" maxFractionDigits="3" value="${customer.amount}" /> VND
				</div>
			</div>
			<div id="bodycontainer" class="col-md-9 container-fluid">
				<form action="doChangePassword" class="col-md-5" role="form" id="changePassForm" method="post">
					<h2 class="headerMessage"><span class="fa fa-cogs"></span> Change Password</h2>
				  	<%
				  		String loginFail = (String)request.getSession().getAttribute(Constant.SESSION_ATR_LOGIN_FAIL);
				  		if (Constant.STR_TRUE.equals(loginFail)) {	
				  	%>
				  		<p class="text-danger">Login error: invalid username or password!</p>	
				  	<%
				  		}
				  	%>
		    		 <div class="form-group">
					    <label for="oldPassword" class="control-label">Old password:</label>
					    <input type="text" name="oldPassword" class="form-control" id="oldPassword" placeholder="Enter old password">
					    <label class="error">Invalid old password!</label>
					  </div>
					  <div class="form-group">
					  	<label for="newPassword" class="control-label">New Password</label>
					  	<input type="password" name="newPassword"  class="form-control" id="newPassword" placeholder="Enter new Password">
					  	<label class="error">Password must be at least 8 character and lower than 25.</label>
					  </div>
					  <div class="form-group">
					  	<label for="password" class="control-label">Repeat New Password</label>
					  	<input type="password" name="repeatNewPassword"  class="form-control" id="repeatNewPassword" placeholder="Repeat new Password">
					  	<label class="error">Repeated password does not match</label>
					  </div>
					  <button type="submit" class="btn btn-primary">Change password</button>
					  <a href="customerInfo" class="btn btn-link">Cancel</a>
		    	</form>
			</div>
			<div class="col-md-1 status">
				<a href="logout"><span class="fa fa-lock"></span></a>
				<a><span class="fa fa-question-circle"></span></a>
				<a><span class="fa fa-download"></span></a>
			</div>
		</section>
		<footer>
			cdc_bank@csc.com
		</footer>
	</body>
</html>
